<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的申请</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
        @media screen and (max-width: 768px) {
            .layui-table-view{
                margin: 0px!important;
            }
            .layui-table-tool{
                line-height: 22px;
                min-height: 40px!important;
            }
            .layui-inline .layui-form-label {
                font-size: 0.7rem!important;
                padding: 0!important;
                width: 40%!important;
            }
            .layui-input-inline .layui-input{
                height: 20px!important;
                font-size: 0.6rem!important;
                padding-left: 0!important;
            }
            .layui-input-inline{
                width: 6rem!important;
            }
            .layui-table-tool-temp .layui-btn{
                height: 1.5rem;
                line-height: 1rem;
                padding: 0 0.3rem;
                font-size: 0.6rem;
            }
            .layui-table-tool-temp{
                padding-right: 0!important;
                width: 5.3rem!important;
            }
            .layui-table-tool-self{
                right: 0.4rem!important;
            }
            .layui-table-tool .layui-inline[lay-event] {
                width: 1rem;
                height: 1rem;
                padding: 0;
            }
            .layui-icon {
                font-size: 0.9rem;
            }
            body{
                height: 30rem!important;
            }
            .layui-table-view{
                height:100%!important;
            }
            .layui-table-body{
                height:100%!important;
            }
            .layui-table-tool{
                padding: 0.6rem 0.4rem;
            }
            .layui-table-view .layui-table{
                width: 100%!important;
            }
            .layui-table-page{
                overflow: scroll;
            }
            .layui-table-column{
                padding: 0.5rem 0.2rem;
            }
            .layui-table-page .layui-laypage a{
                padding: 0 0.4rem;
                font-size: 0.6rem;
            }
            .layui-table-page .layui-laypage span{
                font-size: 0.6rem;
            }
            .layui-table-page .layui-laypage input{
                width: 1.8rem!important;
                padding: 0.1rem;
            }
            .layui-table-cell {
                padding: 2px 4px 2px 6px;
                font-size: 0.6rem;
            }
            .laytable-cell-1-0-0{
                width: 60px!important;
            }
            .laytable-cell-1-0-1{
                width: 70px!important;
            }
            .laytable-cell-1-0-2{
                width: 50px!important;
            }
            .laytable-cell-1-0-3{
                width: 70px!important;
            }
            .laytable-cell-1-0-4{
                width: 70px!important;
            }
            .laytable-cell-1-0-5{
                width: 110px!important;
            }
            .laytable-cell-1-0-6{
                width: 70px!important;
            }
            .layui-btn-xs {
                padding: 0 4px;
                font-size: 0.6rem;
            }
        }
    </style>
</head>
<body>
<div style="display: none" th:text="${tanchuang}" id="tanchuang"></div>
<table class="layui-hide" id="myprocess" lay-filter="myprocess"></table>
<!--下载补款未完成-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>

    {{# if((d.processType === 8 || d.processType === 3) && d.auditerStatus === 200 ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="modify">修改</a>
    {{# } }}

    {{# if(d.processType === 8 && d.auditerStatus === 100 ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="makeup">补款</a>
    {{# } }}


    {{# if(d.processType === 14 && d.auditerStatus === 200 ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="updateComplaint">修改</a>
    {{# } }}

    <!--    {{# if(d.processType === 14 && d.auditerStatus === 100  && d.reviewStatus != 5){ }}-->
    <!--    <a class="layui-btn layui-btn-xs" lay-event="complaint">投诉</a>-->
    <!--    {{# } }}-->

    <!--    {{# if(d.processType === 14 && d.reviewStatus != 5){ }}-->
<!--    <a class="layui-btn layui-btn-xs" lay-event="overComplaint">完成</a>-->
<!--    {{# } }}-->

</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="flush">刷新</button>
    </div>
</script>
<script th:inline=none>
    layui.use(['table', 'dropdown'], function(){
        var table = layui.table;
        var dropdown = layui.dropdown;
        var tanchuang=$("#tanchuang").text();
        if(tanchuang.length>0){
            var index = parent.layer.getFrameIndex(window.name); // 获取父页面的 index
            layer.msg("创建成功");
            parent.location.reload();
            parent.layer.close(index); // 关闭当前窗口
        }
        // 创建渲染实例
        table.render({
            elem: '#myprocess'
            ,url:'/process/myprocess'
            ,toolbar: '#toolbarDemo',
            response: {
                statusCode: 10000 //规定成功的状态码，默认：0
            },
            height: 'full-0'
            , limit:20,
            limits:[20]
            ,cellMinWidth: 80
            ,page: true
            ,cols: [[{field:'processType',  title: '流程类型',templet: function(d) {
                    if (d.processType == 0||d.processType == 12||d.processType == 13) {
                        return '<span>请假单</span>';
                    }
                    if (d.processType == 1) {
                        return '<span>异常考勤</span>';
                    }
                    if (d.processType == 2) {
                        return '<span>入职单</span>';
                    }
                    //成交单3 直接完成 全款
                    if (d.processType == 3) {
                        return '<span>成交单</span>';
                    }
                    if (d.processType == 4) {
                        return '<span>采购单</span>';
                    }
                    if (d.processType == 5||d.processType == 16||d.processType == 17) {
                        return '<span>离职单</span>';
                    }
                    if (d.processType ==6) {
                        return '<span>转正单</span>';
                    }
                    if (d.processType ==7) {
                        return '<span>合规单</span>';
                    }
                    //成交单8 非全款 待补款的
                    if (d.processType ==8) {
                        return '<span>成交单</span>';
                    }
                    if (d.processType == 9) {
                        return '<span>退款单</span>';
                    }
                    if (d.processType == 10) {
                        return '<span>退款单</span>';
                    }
                    if (d.processType ==11) {
                        return '<span>报销单</span>';
                    }
                    if (d.processType ==14) {
                        return '<span>投诉单</span>';
                    }
                    if (d.processType ==15) {
                        return '<span>借款单</span>';
                    }
                }},
                {field:'paymentWay',  title: '单据类型',templet: function(d) {

                        if (d.paymentWay == 2 || d.paymentWay == 3) {
                            return '<span>定金成交单</span>';
                        }
                        if (d.paymentWay == 1) {
                            return '<span>全款成交单</span>';
                        }
                        if (d.paymentWay == 4) {
                            return '<span>365退款单</span>';
                        }
                        if (d.paymentWay == 5) {
                            return '<span>大额退款单</span>';
                        }
                        if (d.paymentWay == 0 || d.paymentWay == null) {
                            return '<span>&nbsp; </span>';
                        }
                    }},
                {field:'applyRealName',  title: '申请人'},
                {field:'auditerStatus',  title:'流程审核状态',templet: function(d) {
                        if (d.auditerStatus == 200) {
                            return '<span style="color: red;">审核驳回</span>';
                        }if(d.auditerStatus == 100){
                            return '<b style="color:green">审核通过</b>';
                        }if(d.auditerStatus == 0){
                            return '<b >未审核</b>';
                        }else {
                            return '<b style="color:#806a00">审核中</b>';
                        }
                    }},
                {field:'auditingPersonRealName',  title:'当前审核人'},
                {field:'applyTime',  title: '流程申请时间',templet: function(d){ if(d.applyTime==null){
                        return '暂无'} else  return todatestr(d.applyTime)}
                }
                ,{title:'操作',  toolbar: '#barDemo'}
            ]],
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
            ,error: function(res, msg){
                console.log(res, msg)
            }
        });
        //修改了 增加了补款页面
        table.on('tool(myprocess)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    type: 2,
                    title: '单据展示',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1200px', '800px'],
                    content: '/process/processdetailpage?id='+data.id+'&processType='+data.processType
                });
                window.addEventListener('message', function(event) {
                    if(event.data===obj.data.id){
                        var formdata=table.getData("myprocess")
                        if(formdata.length===1){
                            table.reload("myprocess", {
                                page: {curr: obj.prev} // 重新加载上一页的数据
                            });
                        }else {
                            obj.del()
                        }
                    }

                });
            } else if (obj.event === 'makeup') {
                // 打开补款页面
                layer.open({
                    type: 2,
                    title: '成交单补款页面',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1200px', '800px'],
                    content: '/process/paymentSwitch?id='+data.id+'&processType='+data.processType
                });
                console.log('id='+data.id+'&processType='+data.processType)

            } else if (obj.event === 'modify') {
                // 打开修改页面
                layer.open({
                    type: 2,
                    title: '成交单修改页面',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1200px', '800px'],
                    content: '/process/proofbargainupdateadd?id='+data.id+'&processType='+data.processType
                });
            }
            // else if (obj.event === 'complaint') {
            //     // 打开投诉页面
            //     layer.open({
            //         type: 2,
            //         title: '投诉页面',
            //         shadeClose: true,
            //         shade: 0.8,
            //         area: ['1200px', '800px'],
            //         content: '/process/goToCompat?id='+data.id+'&processType='+data.processType
            //     });
            // }
            else if (obj.event === 'updateComplaint') {
                // 打开投诉页面
                layer.open({
                    type: 2,
                    title: '投诉单修改页面',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1200px', '800px'],
                    content: '/process/complaintupdate?id='+data.id+'&processType='+data.processType
                });
            }
            // else if (obj.event === 'overComplaint') {
            //     console.log("传递的ID",data.id)
            //     // 投诉申请完成
            //     $.ajax({
            //         type: "POST",
            //         url: "/process/overComplaint",
            //         contentType: "application/json",
            //         data: JSON.stringify({
            //             id: data.id
            //         }),
            //         success: function(response) {
            //             console.log(response);
            //             location.reload(); // 刷新页面
            //         },
            //         error: function() {
            //             console.log("请求失败");
            //         }
            //     });
            // }

            // 给下载按钮绑定点击事件
            $('.layui-btn[lay-event="download"]').click(function() {
                $.ajax({
                    type: "POST",
                    url: "/process/downloadToWord",
                    contentType: "application/json",
                    data: JSON.stringify({
                        processType: data.processType,
                        id: data.id
                    }),
                    success: function(response) {
                        console.log(response);
                    },
                    error: function() {
                        console.log("请求失败");
                    }
                });
            });

        });

        table.on('toolbar(myprocess)', function(obj){
            switch(obj.event){
                case 'flush':
                    table.reload('myprocess');
                    break;
            };
        });

        function  todatestr(s){
            var timestamp = new Date(s);
            let y = timestamp.getFullYear()
            let m = timestamp.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            let d = timestamp.getDate()
            d = d < 10 ? ('0' + d) : d
            let h =timestamp.getHours()
            h = h < 10 ? ('0' + h) : h
            let M =timestamp.getMinutes()
            M = M < 10 ? ('0' + M) : M
            let S =timestamp.getSeconds()
            S= S< 10 ? ('0' + S) :S
            let dateTime= y + '-' + m + '-' + d+ '  ' + h+':'+ M+':'+S
            return  dateTime;
        }

    });
</script>

</body>
</html>